<template>
  <div class="login-page">
    <!-- Background content -->
    <div class="background-content">
      <div class="slogan">
        <h1>上智联</h1>
        <h2>靠谱工作视频见</h2>
        <div class="offer-tag">OFFER拿得快</div>
      </div>
    </div>

    <!-- Login form -->
    <div class="login-form-wrapper">
      <div class="login-form">
        <div class="user-type-selector">
          <button 
            @click="userType = 'jobseeker'"
            :class="{ active: userType === 'jobseeker' }"
          >
            我是求职者
          </button>
          <button 
            @click="userType = 'recruiter'"
            :class="{ active: userType === 'recruiter' }"
          >
            我是招聘方
          </button>
        </div>

        <div class="login-method">
          <button 
            v-for="method in ['验证登录', '密码登录']" 
            :key="method"
            @click="loginMethod = method"
            :class="{ active: loginMethod === method }"
          >
            {{ method }}
          </button>
        </div>

        <div class="phone-input">
          <select v-model="countryCode">
            <option value="+86">中国 +86</option>
            <!-- Add more country codes as needed -->
          </select>
          <input type="tel" placeholder="请输入手机号码" v-model="phoneNumber">
        </div>

        <div v-if="loginMethod === '验证登录'" class="verification-code">
          <input type="text" placeholder="请输入验证码" v-model="verificationCode">
          <button @click="sendVerificationCode">发送验证码</button>
        </div>

        <div v-else class="password-input">
          <input type="password" placeholder="请输入密码" v-model="password">
        </div>

        <button class="login-button" @click="login">注册/登录</button>

        <div class="agreement">
          <label>
            <input type="checkbox" v-model="agreedToTerms">
            <span>同意《注册协议》和《隐私政策》</span>
          </label>
          <a href="#">忘记密码</a>
        </div>

        <div class="alternative-login">
          <button class="qr-code-login">
            <i class="fas fa-qrcode"></i>扫码登录
          </button>
          <div class="social-login">
            <button><i class="fab fa-weixin"></i></button>
            <button><i class="fab fa-qq"></i></button>
            <button><i class="fab fa-weibo"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const userType = ref('jobseeker')
const loginMethod = ref('验证登录')
const countryCode = ref('+86')
const phoneNumber = ref('')
const verificationCode = ref('')
const password = ref('')
const agreedToTerms = ref(false)

const sendVerificationCode = () => {
  console.log('Sending verification code to', phoneNumber.value)
}

const login = () => {
  console.log('Logging in as', userType.value, 'with', loginMethod.value)
}
</script>

<style scoped>
.login-page {
  display: flex;
  min-height: 100vh;
  background-color: #ffc107;
  position: relative;
  overflow: hidden;
}

.background-content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #1e40af;
}

.background-content .slogan h1 {
  font-size: 5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.background-content .slogan h2 {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.background-content .slogan .offer-tag {
  background-color: white;
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5rem 1rem;
  display: inline-block;
}

.login-form-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 80%;
  max-width: 400px;
}

.user-type-selector {
  display: flex;
  margin-bottom: 1.5rem;
}

.user-type-selector button {
  flex: 1;
  padding: 0.75rem;
  text-align: center;
  background-color: #e5e7eb;
  font-size: 1rem;
}

.user-type-selector button.active {
  background-color: #3b82f6;
  color: white;
}

.login-method {
  display: flex;
  margin-bottom: 1rem;
}

.login-method button {
  margin-right: 1.5rem;
  color: #6b7280;
  font-size: 1rem;
  padding-bottom: 0.5rem;
}

.login-method button.active {
  color: #3b82f6;
  border-bottom: 2px solid #3b82f6;
}

.phone-input {
  display: flex;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.phone-input select {
  padding: 0.75rem;
  background-color: #f3f4f6;
  border-right: 1px solid #d1d5db;
  font-size: 1rem;
}

.phone-input input {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
}

.verification-code {
  display: flex;
  margin-bottom: 1rem;
}

.verification-code input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem 0 0 0.25rem;
  font-size: 1rem;
}

.verification-code button {
  background-color: #3b82f6;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 0 0.25rem 0.25rem 0;
  font-size: 1rem;
}

.password-input {
  margin-bottom: 1rem;
}

.password-input input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  font-size: 1rem;
}

.login-button {
  width: 100%;
  background-color: #3b82f6;
  color: white;
  padding: 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: bold;
}

.agreement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.agreement a {
  color: #3b82f6;
}

.alternative-login {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qr-code-login {
  color: #4b5563;
  font-size: 0.875rem;
}

.qr-code-login i {
  margin-right: 0.5rem;
}

.social-login button {
  margin-left: 1rem;
  font-size: 1.25rem;
}

.social-login button:nth-child(1) i {
  color: #07c160;
}

.social-login button:nth-child(2) i {
  color: #12b7f5;
}

.social-login button:nth-child(3) i {
  color: #e6162d;
}

@media (max-width: 1024px) {
.login-page {
  flex-direction: column;
}

.background-content {
  position: relative;
  width: 100%;
  height: 40vh;
  justify-content: center;
  text-align: center;
}

.background-content .slogan h1 {
  font-size: 3rem;
}

.background-content .slogan h2 {
  font-size: 2rem;
}

.background-content .slogan .offer-tag {
  font-size: 1.5rem;
}

.login-form-wrapper {
  position: relative;
  width: 100%;
  padding: 2rem 0;
}
}
</style>